<template>
  <ContentPanel :showTopBorder="true">
    <div class="create">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="80px"
        @submit.prevent
      >
        <el-form-item label="群组封面" prop="icon">
          <el-upload
            :headers="headers"
            class="avatar-uploader"
            :action="uploadIconUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="formData.icon" :src="ip + formData.icon" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="群组名称" prop="name">
          <el-input
            maxlength="150"
            clearable
            placeholder="请输入群组名称"
            v-model.trim="formData.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="群组权限" prop="joinType">
          <el-switch
            v-model="formData.joinType"
            class="mb-2"
            active-text="验证加入"
            inactive-text="直接加入"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="群组公告" prop="notice">
          <el-input
            clearable
            placeholder="请输入群组公告"
            v-model.trim="formData.notice"
            type="textarea"
            :rows="5"
            maxlength="100"
            :show-word-limit="true"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </ContentPanel>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const formData = ref({});
const formDataRef = ref();
const rules = {
  name: [{ required: true, message: "请输入群名称" }],
  joinType: [{ required: true, message: "请选择加入权限" }],
  icon: [{ required: true, message: "请选择头像" }],
  notice: [{ required: true, message: "请输入群公告" }],
};

const ip = import.meta.env.VITE_APP_ACCESS_IP;
const uploadIconUrl = import.meta.env.VITE_APP_UPLOAD_IP;
const headers = ref({
  Authorization: localStorage.getItem("token"),
});
const icon = ref("");
const handleAvatarSuccess = (res, file) => {
  formData.value.icon = res.data;
};

const submit = async () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    Object.assign(params, formData.value);
    const res = await proxy.Api.createCluster(params);
    if (res.code !== 200) {
      proxy.$message.error(res.message);
      return;
    } else {
      formDataRef.value.resetFields();
      proxy.$message.success("创建群组成功");
    }
  });
};
</script>

<style lang="scss" scoped>
.create {
  padding-top: 10px;

  .avatar-uploader {
    border: 1px dashed #8c939d;
    border-radius: 6px;
    cursor: pointer;
    width: 120px;
    height: 100px;
    position: relative;
    overflow: hidden;

    .avatar {
      width: 120px;
      height: 100px;
      display: block;
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 100px;
      text-align: center;
    }
  }
}
</style>
